<template>
    <a-spin :spinning="loading">
        <a-card :bordered="false" class="mapBox">
            <div class="mapCus">
                <a-button style="margin-bottom: 8px" @click="ProvincesClick('此区域全部客户列表', null)">此区域客户总数: {{ RegionsAllCount
                }}
                </a-button>
                <br />
                <a-button style="margin-bottom: 8px" @click="ProvincesClick('此区域已维护客户列表', '1')">已维护客户总数: {{
                    RegionsExistAddressCount }}
                </a-button>
                <br />
                <a-button @click="ProvincesClick('此区域待维护客户列表', '2')">待维护客户总数: {{ RegionsNoExistAddressCount }}</a-button>
            </div>
            <a-button class="mapBtn" v-if="!isReturnChina" type="primary" icon="redo" @click="getDataList()">刷新</a-button>
            <!--<a-button class="mapBtn" v-else type="primary" @click="ProvincesClick(null,null)">本省/市客户</a-button>-->
            <div class="echartsGroup">
                <!-- 返回中国地图 -->
                <div class="button" v-show="isReturnChina" @click="returnChinaFn()">返回中国地图</div>
                <!-- echarts 图表 -->
                <div ref="china_map" style="height: 100%; width: 100%"></div>
            </div>
            <view-form ref="viewForm" :parentObj="this" @MapEdit="MapEdit"></view-form>
        </a-card>
    </a-spin>
</template>

<script>
import ViewForm from './ViewForm.vue'
import 'echarts/map/js/china.js' // 核心文件
require('echarts/theme/macarons') //
export default {
    components: { ViewForm },
    data() {
        return {
            mapData: [
                // 自己做的模拟数据 后续根据业务展示
                // { name: '湖北', value: 88 },
            ],
            provinces: {
                // 数据
                台湾: 'taiwan',
                河北: 'hebei',
                山西: 'shanxi',
                辽宁: 'liaoning',
                吉林: 'jilin',
                黑龙江: 'heilongjiang',
                江苏: 'jiangsu',
                浙江: 'zhejiang',
                安徽: 'anhui',
                福建: 'fujian',
                江西: 'jiangxi',
                山东: 'shandong',
                河南: 'henan',
                湖北: 'hubei',
                湖南: 'hunan',
                广东: 'guangdong',
                海南: 'hainan',
                四川: 'sichuan',
                贵州: 'guizhou',
                云南: 'yunnan',
                陕西: 'shanxi1',
                甘肃: 'gansu',
                青海: 'qinghai',
                新疆: 'xinjiang',
                广西: 'guangxi',
                内蒙古: 'neimenggu',
                宁夏: 'ningxia',
                西藏: 'xizang',
                北京: 'beijing',
                天津: 'tianjin',
                上海: 'shanghai',
                重庆: 'chongqing',
                香港: 'xianggang',
                澳门: 'aomen',
            },
            isReturnChina: false, // 是否显示返回中国地图
            options: null, // echarts 存数据
            mapDataShow: [],
            eData: [],
            ProvincesName: '',
            ProvincesId: '',
            loading: false,
            RegionsAllCount: 0,
            RegionsExistAddressCount: 0,
            RegionsNoExistAddressCount: 0,
            mapRegions: {},
            Level: 0,
            AreaType: null,
            params: {},
        }
    },
    mounted() {
        this.returnChinaFn()
    },
    methods: {
        MapEdit() {
            if (this.isReturnChina) this.getCityList(this.params)
            else this.getDataList()
        },
        // 省市按钮
        ProvincesClick(title, IsExistAddress) {
            this.$refs.viewForm.openForm(
                this.ProvincesId,
                title || this.ProvincesName + '客户列表',
                this.AreaType,
                IsExistAddress,
                this.Level
            )
        },
        // 中国地图点击省份 显示当前省份的详细的地区。
        chinaMapHidden(chinaMap) {
            const that = this
            chinaMap.off('click')
            chinaMap.on('click', async function (params) {
                if (!params.data) return that.$message.error('当前地区暂无数据')
                // 是否为点击省份
                if (params.name in that.provinces) {
                    that.ProvincesName = params.name
                    that.ProvincesId = params.data.Id
                    that.Level = 1
                    that.AreaType = '省份'
                    const s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`)
                    if (s) {
                        that.params = params
                        // 获取市级信息
                        that.getCityList(params)
                    }
                } else {
                    that.$refs.viewForm.openForm(params.data.Id, params.name, that.Level)
                }
            })
        },
        // 渲染地图
        chinaMaprsult(name = null, mapData, eData) {
            const _this = this
            name == 'china' ? (this.isReturnChina = false) : (this.isReturnChina = true)
            const chinaMap = this.$echarts.init(this.$refs.china_map)
            this.options = {
                // 点击触发
                // tooltip: {
                //   trigger: 'item',
                //   triggerOn: 'click',
                //   // 鼠标移到图里面的浮动提示框
                //   formatter: function (params) {
                //     var name = params.name
                //     var toolipData = []
                //     _this.provinceData.forEach((item) => {
                //       if (name == item.name) {
                //         toolipData = item.children
                //       }
                //     })
                //     var htmlStr = ''
                //     toolipData.forEach((item) => {
                //       htmlStr += `<li class="list-li" name="${item.cCusName}"><div οnclick="clickRoute()" >${item.cCusName}</div></li>`
                //     })
                //     return `<div class="list-wrap"><div class="list-title">${name}</div>${
                //       htmlStr.length > 0 ? `<ul class="list-ul">${htmlStr}</ul>` : ''
                //     }</div>`
                //   },
                // },
                tooltip: {
                    formatter: function (params) {
                        return params.name
                    },
                },
                visualMap: {
                    // 左下角展示
                    show: true,
                    min: 0,
                    max: 100,
                    left: 10,
                    bottom: 170,
                    showLabel: true,
                    textStyle: {
                        color: '#000',
                    },
                    inRange: {
                        color: ['#e0ffff', '#3a41ff'], // 取值范围的颜色
                    },
                },
                geo: {
                    map: name || 'china', // 核心
                    roam: false,
                    label: {
                        // 页面初始化加载的文字
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#777', // 页面初始化的地图文字颜色
                                fontSize: 12, // // 页面初始化的地图文字大小
                            },
                        },
                    },
                    itemStyle: {
                        // 设置样式
                        normal: {
                            borderWidth: 0.5, // 区域边框宽度
                            borderColor: 'rgba(119, 156, 255, 1)',
                            // areaColor: {
                            //   x: 0,
                            //   y: 0,
                            //   x2: 0,
                            //   y2: 1,
                            //   colorStops: [
                            //     {
                            //       offset: 0,
                            //       color: '#073684', // 0% 处的颜色
                            //     },
                            //     {
                            //       offset: 1,
                            //       color: '#061E3D', // 100% 处的颜色
                            //     },
                            //   ],
                            // },
                        },
                        emphasis: {
                            // 移入背景颜色
                            // areaColor: '#ff00ff',
                            areaColor: '#F9D92E',
                            show: true,
                            textStyle: {
                                color: '#000',
                                fontSize: '12px',
                            },
                        },
                    },
                },
                // 地图
                series: [
                    {
                        type: 'map',
                        geoIndex: 0,
                        color: '#000',
                        itemStyle: {
                            // 地图区域的多边形 图形样式
                            normal: {
                                // 是图形在默认状态下的样式
                                label: {
                                    show: true, // 是否显示标签
                                    textStyle: {
                                        color: 'black',
                                    },
                                },
                            },
                            zoom: 1, // 地图缩放比例,默认为1
                            emphasis: {
                                // 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                label: { show: true },
                            },
                        },
                        label: {
                            normal: {
                                show: true, // 显示省份标签
                                textStyle: { color: '#696969' }, // 省份标签字体颜色
                            },
                            emphasis: {
                                show: true,
                                textStyle: {},
                            },
                        },
                        data: mapData,
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        rippleEffect: {
                            brushType: 'fill',
                            scale: 3,
                        },
                        showEffectOn: 'render',
                        itemStyle: {
                            color: '#f0f',
                        },
                        label: {
                            normal: {
                                show: true,
                                color: '#081727', // 字体颜色
                                position: 'inside',
                                padding: [0, 0, 0, 0],
                                verticalAlign: 'middle',
                                formatter: function (para) {
                                    return para.data.num
                                },
                            },
                        },
                        symbol: 'circle',
                        // symbolRotate: 20,
                        symbolSize: [15, 15],
                        data: eData,
                        // zlevel: 1,
                    },
                ],
            }
            chinaMap.setOption(this.options)
            this.chinaMapHidden(chinaMap)
        },
        // 返回中国地图
        returnChinaFn() {
            this.Level = 0
            this.AreaType = null
            this.ProvincesId = ''
            // 获取数据  处理数据
            if (this.mapData.length <= 0) {
                this.getDataList()
            } else {
                this.getData()
            }
        },
        getCityList(params) {
            this.$http
                .post('/CustomerManagement/CustomerInfo/GetDataListAsyncForMap', {
                    Level: '1',
                    Conditions: [
                        {
                            Condition: 'ParentId',
                            Keyword: params.data.Id,
                        },
                    ],
                })
                .then((res) => {
                    if (res.Success) {
                        this.RegionsAllCount = res.Data.RegionsAllCount
                        this.RegionsExistAddressCount = res.Data.RegionsExistAddressCount
                        this.RegionsNoExistAddressCount = res.Data.RegionsNoExistAddressCount
                        this.mapDataShow = res.Data.CustInfoFMList
                        this.eData = this.mapDataShow.map((item) => ({
                            name: item.name,
                            value: [item.Longitude, item.Latitude],
                            num: item.value,
                            visualMap: false,
                            Id: item.Id,
                        }))
                        this.chinaMaprsult(params.name, this.mapDataShow, this.eData)
                    }
                })
        },
        getDataList() {
            this.loading = true
            this.Level = 0
            this.AreaType = null
            this.ProvincesId = ''
            this.$http
                .post('/CustomerManagement/CustomerInfo/GetDataListAsyncForMap', {
                    Level: '0',
                })
                .then((res) => {
                    this.loading = false
                    if (res.Success) {
                        this.mapData = res.Data.CustInfoFMList
                        this.mapRegions = {
                            RegionsAllCount: res.Data.RegionsAllCount,
                            RegionsExistAddressCount: res.Data.RegionsExistAddressCount,
                            RegionsNoExistAddressCount: res.Data.RegionsNoExistAddressCount,
                        }
                        this.RegionsAllCount = this.mapRegions.RegionsAllCount
                        this.RegionsExistAddressCount = this.mapRegions.RegionsExistAddressCount
                        this.RegionsNoExistAddressCount = this.mapRegions.RegionsNoExistAddressCount
                        this.getData()
                    }
                })
        },
        getData() {
            // 左上客户数据
            this.RegionsAllCount = this.mapRegions.RegionsAllCount
            this.RegionsExistAddressCount = this.mapRegions.RegionsExistAddressCount
            this.RegionsNoExistAddressCount = this.mapRegions.RegionsNoExistAddressCount
            // 中国地图
            const mapData = this.mapData
            const eData = mapData.map((item) => ({
                name: item.name,
                value: [item.Longitude, item.Latitude],
                num: item.value,
                visualMap: false,
                Id: item.Id,
            }))
            window.clickRoute = this.clickRoute
            this.$nextTick((_) => {
                this.chinaMaprsult('china', mapData, eData)
            })
        },
        // 点击跳转页面
        clickRoute() {
            alert('点击了,做其他操作!')
        },
    },
}
</script>
<style>
.mapCus {
    position: absolute;
    top: 10px;
    left: 10px;
}

.echartsGroup {
    top: -110px;
    width: 1050px;
    height: 1050px;
    position: relative;
}

.echartsGroup .button {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    position: absolute;
    top: 170px;
    left: 10px;
    z-index: 99;
}

.list-ul {
    list-style: none;
    margin-left: -20px;
}

.list-li {
    pointer-events: all;
    cursor: pointer;
}

.mapBox {
    overflow: hidden;
    height: 900px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.mapBtn {
    position: absolute;
    right: 30px;
}
</style>